<template>
  <el-card>
    <el-radio-group v-model="radio1" size="large" class="mt">
      <el-radio-button label="严重告警" :value="1"></el-radio-button>
      <el-radio-button label="紧急告警" :value="2"></el-radio-button>
      <el-radio-button label="重要告警" :value="3"></el-radio-button>
      <el-radio-button label="一般告警" :value="4"></el-radio-button>
    </el-radio-group>
  </el-card>
  <el-card class="mt" v-for="item in alarmList" :key="item.code">
    <el-alert
      class="mb"
      :title="`${item.address}充电桩充电异常`"
      type="warning"
      show-icon
    />

    <el-descriptions :column="4" border direction="vertical">
      <el-descriptions-item :label="getLabel(key)" v-for="(i, key) in item" :key="key">
        <el-tag
          v-if="key === 'level'"
          :type="i === 1 ? 'danger' : i === 2 ? 'warning' : 'info'"
          >{{ i === 1 ? '严重' : i === 2 ? '紧急' : '一般' }}</el-tag
        >
        <el-text v-else-if="key === 'status'" type="danger">{{
          i === 1 ? '待指派' : i === 2 ? '处理中' : '处理异常'
        }}</el-text>
        <span v-else>{{ i }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="操作">
        <el-button @click="drawer = true" :type="item.status === 2 ? 'warning' : 'primary'">
          {{ item.status === 1 ? '指派' : item.status === 2 ? '催办' : '查看' }}
        </el-button>
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
  <el-drawer
    title="报警任务指派"
    v-model="drawer"
  >
    <StepForm :steps="steps"   :formRef1="formRef1" :formRef2="formRef2" :formRef3="formRef3"  @submit="submit2">
      <template #step1>
        <div>
          <el-form :model="formData.basicInfo" label-width="100px" :rules="basicRules" ref="formRef1">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.basicInfo.name" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="formData.basicInfo.email" />
            </el-form-item>
            <el-form-item label="电话" prop="tel">
              <el-input v-model="formData.basicInfo.tel" />
            </el-form-item>
            <el-form-item label="工号" prop="no">
              <el-input v-model="formData.basicInfo.no" />
            </el-form-item>
            <el-form-item label="是否加急">
              <el-switch v-model="formData.basicInfo.urgent" />
            </el-form-item>
            <el-form-item label="其他选项">
              <el-checkbox-group v-model="formData.basicInfo.other">
                <el-checkbox label="更换设备" value="1" />
                <el-checkbox label="仅维修" value="2" />
                <el-checkbox label="需拍照片" value="3" />
                <el-checkbox label="需报备" value="4" />

              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="其它备注信息">
              <el-input type="textarea" v-model="formData.basicInfo.remark" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #step2>
        <el-form ref="formRef2" :model="formData.shenpiInfo" label-width="150px" :rules="shenpiRules">
          <el-form-item label="请选择审批部门" prop="a">
            <el-select v-model="formData.shenpiInfo.a" clearable>
            <el-option label='总裁办' value='1' />
            <el-option label='运营部' value='2' />
            <el-option label='维修部' value='3' />
            <el-option label='市场部' value='4' />
            <el-option label='财务部' value='5' />
            </el-select>
          </el-form-item>
          <el-form-item label="请选择抄送部门" prop="b">
            <el-select v-model="formData.shenpiInfo.b" clearable>
            <el-option label='总裁办' value='1' />
            <el-option label='运营部' value='2' />
            <el-option label='维修部' value='3' />
            <el-option label='市场部' value='4' />
            <el-option label='财务部' value='5' />
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <template #step3>
        <el-form ref="formRef3" :model="formData.leaderInfo" label-width="150px" :rules="leaderRules">
          <el-form-item label="负责人姓名" prop="person">
            <el-input v-model="formData.leaderInfo.person" />
          </el-form-item>
          <el-form-item label="负责人电话" prop="tel">
            <el-input v-model="formData.leaderInfo.tel" />
          </el-form-item>
        </el-form>
      </template>
    </StepForm>
    <el-result
        icon="warning"
        title="设备编号:CD123456789"
        sub-title="改任务已催促2次,请在10分钟内完成指派"
      >
        <template #extra>
          <el-button type="primary" @click="drawer = false">我已知晓</el-button>
        </template>
      </el-result>
  </el-drawer>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { alarmListApi } from '@/api/alarm';
import { getLabel } from './fieldsLabelMap';
import StepForm from '@/components/stepForm/StepForm.vue';
import { ElMessage } from 'element-plus';
interface AlarmList {
  description: string;
  address: string;
  equNo: string;
  level: number;
  time: string;
  code: number;
  status: number;
}
const drawer = ref<boolean>(false);
const radio1 = ref(1);
const alarmList = ref<AlarmList[]>([]);
const formRef1 = ref<any>(null);
const formRef2 = ref<any>(null);
const formRef3 = ref<any>(null);
const formData = ref({
  basicInfo: {
    name: '',
    email: '',
    tel: '',
    no: '',
    urgent:true,
    other:[],
    remark:''
  },
  shenpiInfo:{
    a:'',
    b:''
  },
  leaderInfo:{
   person:'',
   tel:'',
  }
});
const getAlarmList = async () => {
  const res = await alarmListApi();
  alarmList.value = res.data;
};
onMounted(() => {
  getAlarmList();
});

const steps = ref([
  { title: '基本信息' },
  { title: '审批信息' },
  { title: '负责人信息' }
])

const basicRules = {
  name: [{ required: true, message: '请输入姓名' }],
  email: [{ required: true, message: '请输入邮箱' }],
  tel: [{ required: true, message: '请输入电话' }],
  no: [{ required: true, message: '请输入工号' }],
}
const shenpiRules = {
  a: [{ required: true, message: '请选择审批部门' }],
  b: [{ required: true, message: '请选择抄送部门' }],
}
const leaderRules = {
  person: [{ required: true, message: '请输入负责人姓名' }],
  tel: [{ required: true, message: '请输入负责人电话' }],
}
const submit2 = () => {
  console.log('🚀',formData.value); 
  ElMessage.success('提交成功');
  drawer.value = false;
  formRef1.value.resetFields();
  formRef2.value.resetFields();
  formRef3.value.resetFields();
}
</script>
<style lang="less" scoped></style>
